<template>
  <div>
    <!-- 患者聊天记录 -->
    <el-dialog
      class="dialog-frame"
      title="聊天记录"
      width="800"
      :visible.sync="chatRecordDialog"
      @close="chatRecordDialog = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
<!--      <el-button type="primary" @click="openVideoRecord">视频记录</el-button>-->
      <el-table
        class="l-table"
        :data="recordList"
        border
        max-height="480"
        highlight-current-row
      >
        <el-table-column prop="name" label="时间">
          <template slot-scope="scope">
            <span>{{ scope.row.msgDate || "-" }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="角色">
          <template slot-scope="scope">
            <span>{{ scope.row.msgUserName }} </span>
          </template>
        </el-table-column>
        <el-table-column prop="size" label="内容">
          <template slot-scope="scope">
            <viewer v-if="isUrl(scope.row.msgText)">
              <img :src="scope.row.msgText" width="100" title="点击预览" />
            </viewer>
            <span v-else>{{ scope.row.msgText }}</span>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        style="text-align:center;margin:15px 25px;"
        @current-change="changeRecordListCurrent"
        :current-page="recordPage.current"
        :page-size="recordPage.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="recordPage.total"
        @size-change="handleSizeChange"
        :page-sizes="[10, 20, 50]"
      >
      </el-pagination>
    </el-dialog>
    <!-- 患者聊天记录-视频记录 -->
    <el-dialog
      class="dialog-frame"
      title="视频记录"
      width="800"
      :visible.sync="dialogVideoRecord"
      v-if="dialogVideoRecord"
      @close="dialogVideoRecord = false"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-for="(v, i) in 4" :key="i">
        <div>2022/04/01</div>
        <video :id="'playerId' + i" class="video-js" controls></video>
      </div>
    </el-dialog>
  </div>
</template>
<script>
import { isUrl } from "@/utils";
export default {
  props: {},
  data() {
    return {
      chatRecordDialog: false, //聊天记录弹框
      patientMsg: {}, //患者消息列表
      recordPage: {
        //聊天记录分页
        total: 0,
        current: 1,
        size: 10
      },
      recordList: [], //聊天记录列表
      dialogVideoRecord: false
    };
  },
  mounted() {},
  methods: {
    isUrl,
    open(data) {
      this.chatRecordDialog = true;
      this.getRecordList(data);
    },
    getRecordList(data, { page } = {}) {
      // 诊断规范
      page && (this.recordPage.current = page);
      let para = {
        webToken: this.$authInfo.webToken(),
        current: this.recordPage.current,
        size: this.recordPage.size,
        patientId: data.userId,
        userSource: data.userSource
      };
      this.$ajax
        .getChatRecord(para)
        .then(res => {
          this.recordList = res.data.list;
          this.recordPage.total = res.data.total;
          this.recordPage.page = res.data.pages;
        })
        .catch(err => {
          this.$message({
            message: err.msg,
            type: "error"
          });
        });
    },
    handleSizeChange(val) {
      this.recordPage.size = val;
      this.getRecordList();
    },
    changeRecordListCurrent(val) {
      //诊断规范分页
      this.recordPage.current = val;
      this.getRecordList();
    },
    openVideoRecord() {
      this.dialogVideoRecord = true;
    }
  }
};
</script>
